<template>
    <div class="my-account-box">
        <div class="add" @click="click">
            <i><Plus /></i>
        </div>

        <div v-for="v in accountInfos">
            <p>{{v.name}}</p>
            <p class="money-color">{{v.money}}</p>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue' 
import { reactive } from 'vue';

const accountInfos = reactive([])
accountInfos.push(
    {
        name: "银行卡",
        money: 42220.00
    })

const click = () => {
    accountInfos.push({
        name: "添加",
        money: 0
    })
}

</script>

<style lang="scss" scoped>
.my-account-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, 100px);
    gap: 50px;
    
    align-content: center;
    justify-content: start;

    &>div {
        background-color: #CDD0D6;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        * {
            margin: 0;
        }

        &.add {
            color:#fff;

            i {
                width: 50px;
            }

            &:hover {
                color: #67C23A;
                cursor: pointer;
            }
        }

        & .money-color {
            color: red;
            margin-top: 5px;
        }
    }
}
</style>